<template>
    <el-form-item label="" prop="title">
        <div class="flexbox flexcenter">
            <el-popover placement="bottom" width="460" trigger="click">
                <div class="yusuan_num">定向人群：{{createform.audience_list.length}} /10</div>
                <div class="yusuan_list">
                    <div class="yusuan_item flexbox flexcenter flexbetween" @click="seletAudience(item,index)" :class="{'active':index==createform.audience_active}" v-for="(item,index) in createform.audience_list" :key="index">
                        <img src="../../../assets/img/market_checked.svg" alt="" class="ys_check">
                        <el-input v-model="item.model_name" placeholder="请输入内容" size="small" class="ys_input" @input="changePlanKey(4,item.model_name)"></el-input>
                        <div class="yusuan_edit flexbox flexcenter">
                            <el-tooltip content="存为模板" placement="top">
                                <span class="icon_btn" @click.stop="saveModel(item,index,2)"><img src="../../../assets/img/ys_icon1.svg" alt=""></span>
                            </el-tooltip>
                            <el-tooltip content="删除" placement="top">
                                <span class="icon_btn" @click.stop="deletAudience(index)"><img src="../../../assets/img/ys_icon2.svg" alt=""></span>
                            </el-tooltip>
                        </div>
                    </div>
                </div>
                <div class="yusuan_btn flexbox flexbetween">
                    <el-button size="mini" style="width:222px" @click="addAudience">添加定向人群</el-button>
                    <el-button size="mini" style="width:222px" @click="audienceModel">选择模板</el-button>
                </div>
                <div slot="reference" class="select_box flexbox flexcenter flexbetween">
                    <span class="select_text">{{createform.audience.model_name}}</span>
                    <span class="el-icon-caret-bottom"></span>
                </div>
            </el-popover>
            <div class="yusuan_num" style="font-size:14px;margin-left:16px">定向人群：{{createform.audience_list.length}} /10</div>
        </div>
    </el-form-item>
</template>

<script>
export default {
    props: ["createform"],
    name: "",
    data() {
        return {};
    },
    created() {},
    methods: {
        changePlanKey(index, name) {
            this.$emit("changePlanKey", index, name);
        },

        saveModel(item, index, type) {
            this.$emit("saveModel", item, index, type);
        },

        sessionSave() {
            this.$emit("sessionSave");
        },

        // 选择定向人群模板
        seletAudience(val, index) {
            let that = this;
            let list = that.createform;
            if (list.audience_list.length == 1) {
                list.audience_active = index;
                list.audience = val;
            } else {
                this.ActionInterestCheck(list.audience_active, function () {
                    list.audience_list[list.audience_active] = list.audience;
                    list.audience_active = index;
                    list.audience = val;
                    that.changePlanKey(4, val.model_name);
                });
            }
            this.sessionSave();
        },

        //删除定向人群列表
        deletAudience(index) {
            let list = this.createform;
            if (this.createform.audience_list.length == 1) {
                return;
            } else {
                list.audience_list.splice(index, 1);
                list.audience_active = 0;
                list.audience = list.audience_list[0];
            }
            this.sessionSave();
        },

        // 添加定向人群列表
        addAudience() {
            let that = this;
            let list = that.createform;
            if (list.audience_list.length > 9) {
                return;
            } else {
                this.ActionInterestCheck(list.audience_active, function () {
                    let audience = {
                        model_name:
                            "定向人群" + (list.audience_list.length + 1),
                        isAllCity: false, //城市是否全选
                        district: "NONE", //城市
                        location_type: "CURRENT",
                        cityVal: [], //已选城市
                        cityHasCheck: [],
                        cityAllValue: [], //地域提交值
                        gender: "NONE", //性别
                        age: [], //年龄
                        awemeRadio: "1", //抖音达人切换
                        recomentRadio: "CLASS", //抖音达人切换
                        aweme_fan_behaviors: ["FOLLOWED_USER"], //已选抖音用户行为类型
                        aweme_fan_behaviors_days: "", //抖音达人互动用户行为天数
                        category_id: "", //推荐达人ID
                        category_text: "", //推荐名称
                        titokQuery: "", //抖音达人搜索
                        tiktokTypeOption: [], //达人分类列表
                        tiktokTypeCheck: [], //已选达人分类
                        tiktokTypeVal: [], //已选达人分类绑定值
                        titokTalentList: [], //抖音达人列表
                        titokTalentVal: [], //抖音达人绑定值ID
                        titokTalentText: [], //抖音达人显示值
                        tiktokAllCheck: [], //抖音达人总选
                        back_id: "", //返回达人ID
                        back_text: "", //返回达人名称
                        crowdRadio: "1", //更多人群切换
                        crowdTab: "1",
                        crowdDrop: "ALL",
                        plartformCrow: [], //平台精选人群列表
                        customCrow: [], //自定义人群列表
                        plartformVal: [], //平台精选人群绑定值
                        plartformText: [], //已选平台精选人群
                        customCrowdText: [], //已选自定义人群
                        allCrowdCheck: [], //人群总选
                        auto_extend_enabled: 0, //是否开启智能投放
                        auto_extend_targets: [], //已选智能投放绑定值
                        auto_extend_text: [], //已选智能投放列表
                        smart_interest_action: "", //行为兴趣类型
                        action_scene: ["E-COMMERCE", "NEWS", "APP"], //行为场景
                        actionTab: "1",
                        interestTab: "1",
                        action_days: "30", //行为天数
                        actionList: [], //行为类目列表
                        action_val: [], //行为类目绑定值
                        action_text: [], //行为类目已选值
                        action_key_list: [], //行为类目关键词列表
                        action_key_text: [], //行为类目已选关键词
                        actionAllCheck: [], //行为类目词总选值
                        actionKeyText: "", //已选行为类目
                        interestList: [], //兴趣类目列表
                        interest_val: [], //兴趣类目绑定值
                        interest_text: [], //兴趣类目已选值
                        interest_key_list: [], //兴趣关键词列表
                        interest_key_text: [], //兴趣已选关键词
                        interestAllCheck: [], //兴趣总选值
                        interestKeyText: "", //已选兴趣类目
                        age_null: "1",
                        ac: [], //网络
                        ac_null: "1",
                        platform: "", //平台
                        audience_mode: "AUTO",
                        exclude_limited_region: 0, //排除限定地区
                        new_customer: "NONE", //新客定向
                        district_type:true
                    };
                    list.audience_list.push(audience);
                    list.audience_active = list.audience_list.length - 1;
                    list.audience = list.audience_list[list.audience_active];
                });
            }
            this.sessionSave();
        },

        // 定向人群校验
        ActionInterestCheck(index, callback) {
            let list = this.createform.audience_list;
            if (list[index].district !== "NONE") {
                if (list[index].cityVal.length == 0) {
                    this.$message.error("请选择地域");
                    return;
                }

                if (list[index].cityHasCheck.length >= 2000) {
                    this.$message.error("地域不能超过2000个");
                    return;
                }
            }

            if (list[index].awemeRadio == "2") {
                if (list[index].tiktokAllCheck.length == 0) {
                    this.$message.error("请选择抖音达人");
                    return;
                } else if (list[index].tiktokAllCheck.length > 30) {
                    this.$message.error("抖音达人不能超过30个");
                    return;
                }
            }

            if (list[index].crowdRadio == "2") {
                if (list[index].allCrowdCheck.length == 0) {
                    this.$message.error("请选择人群");
                    return;
                }
            }

            if (list[index].auto_extend_enabled == 1) {
                if (list[index].auto_extend_text.length == 0) {
                    this.$message.error("请选择智能放量");
                    return;
                }
            }

            if (list[index].smart_interest_action == "CUSTOM") {
                if (list[index].actionAllCheck.length == 0) {
                    this.$message.error("请选择行为意向");
                    return;
                } else if (list[index].actionAllCheck.length > 350) {
                    this.$message.error("行为意向不能超过30个");
                    return;
                }

                if (list[index].interestAllCheck.length == 0) {
                    this.$message.error("请选择兴趣意向");
                    return;
                } else if (list[index].interestAllCheck.length > 350) {
                    this.$message.error("兴趣意向不能超过30个");
                    return;
                }
            }

            callback();
        },

        // 选择定向人群模板
        audienceModel() {
            const attr = {
                dialogVsb: true,
            };
            this.$bus.emit("audienceModel", attr);
        },
    },
    components: {},
};
</script>


<style scoped>
</style>

